<template>
    <div>
        <vxe-tip status="primary" title="配置">
            配置 radioConfig 参数
        </vxe-tip>

        <vxe-tip status="primary" title="事件">
            checkbox-change
        </vxe-tip>

        <vxe-tip status="warning" title="注意">
            需要 rowConfig.keyField 配置
        </vxe-tip>

        <y-table ref="gridRef" v-bind="listOptions" @checkbox-change="checkboxChangeEvent"
            @toolbar-button-click="toolbarButtonClickEvent">

        </y-table>
    </div>
</template>

<script>
import { getTableData } from '@/api/table'

export default {
    data() {
        return {
            selectRow: null,
            listOptions: {
                // 获取数据方法
                dataMethod: getTableData,
                formOptions: {
                    items: [
                        {
                            field: 'shen',
                            title: '省',
                            itemRender: {
                                name: 'ElSelect',
                                options: [
                                    { label: '四川省', value: '510000' },
                                    { label: '青海省', value: '630000' }
                                ],
                            }
                        },
                        {
                            field: 'shi',
                            title: '市',
                            itemRender: {
                                name: 'ElSelect',
                                options: [
                                    { label: '锦江区', value: '510104' },
                                    { label: '青羊区', value: '510105' },
                                    { label: '旌阳区', value: '510603' },
                                    { label: '中江县', value: '510623' },
                                    { label: '城东区', value: '630102' },
                                    { label: '城中区', value: '630103' },
                                    { label: '德令哈市', value: '632802' },
                                    { label: '格尔木市', value: '632801' },
                                ]
                            }
                        },
                        {
                            field: 'qu',
                            title: '区',
                            itemRender: {
                                name: 'ElSelect',
                                options: [
                                    { label: '锦江区', value: '510104' },
                                    { label: '青羊区', value: '510105' },
                                    { label: '旌阳区', value: '510603' },
                                    { label: '中江县', value: '510623' },
                                    { label: '城东区', value: '630102' },
                                    { label: '城中区', value: '630103' },
                                    { label: '德令哈市', value: '632802' },
                                    { label: '格尔木市', value: '632801' },
                                ]
                            }
                        }
                    ]
                },
                // 表格配置
                tableOptions: {
                    height: '',
                    rowConfig: {
                        keyField: 'userId'
                    },
                    toolbarConfig: {
                        buttons: [
                            { name: '设置 userId 为 【61E92EF67418DC54】 的数据被选中', code: 'check', status: 'success' },
                            { name: '取消选中', code: 'clear', status: 'warning' },

                        ]
                    },
                    // 表格列
                    columns: [
                        { type: 'seq', width: 70 },
                        { type: 'checkbox', width: 70 },
                        { field: 'kdmc', title: '考点名称' },
                        { field: 'ksh', title: '考生号' },
                        { field: 'xm', title: '姓名' },
                        { field: 'xb', title: '性别' },
                        { field: 'createTime', title: '时间' }
                    ],
                }
            }

        }
    },
    mounted() {
        this.$refs.gridRef.loadData()
    },
    methods: {
        checkboxChangeEvent(e) {
            this.$message.success(`单选事件，查看控制台输出`)
            this.selectRow = e;
            console.log(e)
        },
        toolbarButtonClickEvent({ code }) {
            switch (code) {
                case 'check':
                    this.setCheck();

                    break;
                case 'clear':
                    this.clearRadioRow();
                    break;
                default:
                    break;
            }
        },
        setCheck() {
            this.$refs.gridRef.setCheckboxRowKey(['61E92EF67418DC54'])
        },
        clearRadioRow() {
            this.$refs.gridRef.clearCheckboxRow()
        }
    }
}
</script>

<style lang="scss" scoped></style>